<template>
    <div class="game_wrapper">
        <Header />

        <section class="game_content">
            <ul class="reward-content-3">
                <li v-for="item in 3" :key="item" class="rewardItem">
                    <span class="reward-red" data-count="2"></span>
                    <span class="reward-green" data-count="2"></span>
                    <span class="reward-blue" data-count="2"></span>
                    <span class="reward-white" data-count="2"></span>
                </li>
            </ul>

            <ul>
                <li class="rewardItem"></li>
                <li v-for="item in categoryOneList" :key="item.key" class="rewardItem">
                    <span v-for="i in item.materials" :key="i.material" :class="cardClass[i.material]" :data-count="i.need" />
                </li>
            </ul>
        </section>
    </div>
</template>

<script setup lang="ts">
import { categoryOne, cardClass } from '@/utils/constant';

const randomCategoryOne = structuredClone(categoryOne).sort(() => 0.5 - Math.random());
const targetOne = ref(4);
// 截取randomCategoryOne中targetOne个元素
const categoryOneList = computed(() => randomCategoryOne.slice(targetOne.value - 4, targetOne.value));
</script>

<style scoped lang="less">
.game_wrapper {
    background: url(@/assets/game_bg.jpeg) no-repeat center / 100% 100%;
    width: 100%;
    /* prettier-ignore */
    max-width: 750PX; /*no*/
    height: 100vh;
    padding: 80px 40px;
    margin: 0 auto;

    .game_content {
        margin-top: 80px;

        ul {
            display: flex;
            justify-content: space-between;

            li {
                list-style: none;
                width: 18%;
                aspect-ratio: 1/1;
                padding: 16px;
                border-radius: 20%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .rewardItem {
                background: url(@/assets/start_border.svg) no-repeat center / 50% 50%;
                background-color: rgb(206, 209, 12);
                display: grid;
                row-gap: 10%;
                grid-template-columns: 42% 42%;
                grid-template-rows: 42% 42%;

                & span {
                    position: relative;
                }

                & span:after,
                & span:before {
                    content: '';
                    display: block;
                    position: absolute;
                    color: #000;
                    top: 40px;
                    width: 44px;
                    height: 44px;
                    line-height: 44px;
                    font-size: 44px;
                    text-align: center;
                }

                & span:before {
                    background-color: rgb(253, 255, 110);
                }

                & span:after {
                    content: attr(data-count);
                    z-index: 2;
                }

                & span:nth-of-type(2n):after,
                & span:nth-of-type(2n):before {
                    right: 0;
                }
            }

            &:not(:first-of-type) {
                margin-top: 28px;
            }
        }

        .reward-content-3 {
            justify-content: start;
            gap: 2.5%;
        }

        .reward-red {
            display: inline-block;
            background: url(@/assets/jewel/red.png) no-repeat center / 100% 100%;
        }

        .reward-blue {
            display: inline-block;
            background: url(@/assets/jewel/blue.png) no-repeat center / 100% 100%;
        }

        .reward-green {
            display: inline-block;
            background: url(@/assets/jewel/green.png) no-repeat center / 100% 100%;
        }

        .reward-white {
            display: inline-block;
            background: url(@/assets/jewel/white.png) no-repeat center / 100% 100%;
        }

        .reward-purple {
            display: inline-block;
            background: url(@/assets/jewel/purple.png) no-repeat center / 100% 100%;
        }
    }
}
</style>
